<template>
  <div class="edit-div">
    <div class="page-title">课程管理 > 编辑课程</div>
    <div class="demo-input-suffix">
      <span class="form-input-label"><i class="el-icon-star-on"></i>课程名称：</span>
      <el-input v-model="data.course_name" required placeholder="请输入课程名称"></el-input>
    </div>
    <div class="demo-input-suffix upload-div" style="margin-top: 15px;">
      <span class="form-input-label">课程封面：</span>
      <span class="upload-span" @click="onUpFile"> + 上传封面 </span>
      <input type="file" @change="onFileChange" accept="image/*" style="width:0px" id="file" />
      <img v-if="attach_url" :src="attach_url" class="preview-img" width="200" />
    </div>
    <div class="demo-input-suffix">
      <span class="form-input-label"><i class="el-icon-star-on"></i>付费：</span>
      <el-radio v-model="free" label="1">免费</el-radio>
      <el-radio v-model="free" label="0">付费</el-radio>
      <el-input type="number" v-model="data.price" placeholder="请输入课程价格">
        <i class="el-input__icon" slot="prefix"> ￥ </i>
      </el-input> 元
    </div>
    <div class="demo-input-suffix">
      <span class="form-input-label">编辑器：</span>
      <el-radio v-model="data.detail_type" value="M" label="M">Markdown</el-radio>
      <el-radio v-model="data.detail_type" value="H" label="H">富文本</el-radio>
    </div>
    <div class="demo-input-suffix flex-editor">
      <span class="form-input-label"><i class="el-icon-star-on"></i>课程简介：</span>
      <div class="inline-editor">
        <ckeditor v-if="data.detail_type == 'H'"
          :editor="editor"
          v-model="data.describe"
          :config="editorConfig"></ckeditor>
        <MarkdownPro v-else v-model="data.describe" />
      </div>
    </div>
    <div class="submit-bar">
      <el-button @click="onSubmit" type="primary">保存</el-button>
      <el-button @click="goBack">取消</el-button>
    </div>
  </div>
</template>
<script>
import { courseModel, _upload } from "@/api/models";
import { Message } from "element-ui";
import editorMixin from '@/mixins/editorMixin.js';
import goBack from '@/mixins/goBack.js'
export default {
  mixins: [editorMixin, goBack],
  components: {},
  data() {
    return {
      data: {
        id: null,
        course_name: null,
        describe: '',
        avatar_id: null,
        theo_hours: 0,
        prac_hours: 0,
        credit: 0,
        capacity: 60,
        choice_code: '',
        detail_type: 'H',
        editor: 'H'
      },
      attach_url: null,
      free: '0',
    };
  },
  mounted() {
    if (this.$route.params.id) {
      this.id = this.$route.params.id
      this.getItem()
    }
  },
  methods: {
    getItem() {
      courseModel.item(this.id, res => {
        this.data = res.data;
        // flex editorMixin
        this.data.detail_type = res.data.editor
        this.attach_url = res.data.avatar_url
        this.data.price /= 100
      });
    },
    onSubmit() {
      let d = Object.assign({}, this.data);
      console.log('onsubmit d', d)
      if (
        !d.course_name ||
        !d.describe
      ) {
        return Message.warning("请填完整信息");
      }
      if (this.checked_capacity && this.capacity ==0 ) {
        return Message.warning("请填写课程容量");
      }
      d.price *= 100
      if(d.id) {
        courseModel.update(d.id, d, res=> {
          Message.success(res.message);
          this.$router.push('/course/' + this.id)
        }, err => {
          Message.warning(err.message)
        })
      }else{
        courseModel.create(d, res => {
          this.$router.push('/course/' + res.data.id)
          Message.success(res.message)
        })
      }
    },
    onUpFile() {
      document.getElementById('file').click()
    },
    onFileChange(e) {
      console.log(e, _upload)
      let _this = this
      _upload(e.target.files[0], res => {
        console.log(res)
        _this.data.avatar_id = res.data.id
        _this.attach_url = res.data.attach_url
      })
    }
  }
};
</script>
<style scoped lang="scss">

</style>